<template>
    <!-- 
    传入的参数：
      url: 表格的请求地址--必传
      small: 分页的尺寸--默认small
      pageSizes: 每页多少条配置
      disabled: 是否禁用--默认false
      method: 请求方式--默认post
      params: 请求参数
    供外部监听的事件:
      lodingEvt: 数据请求开始或者结束--true为开始--false为结束，供表格动画使用
      getData: 请求返回的表格数据 ！仅表格数据
      allData: 请求返回的所有参数 
    -->
    <div class="paging">
        <div>共{{total}}条记录，当前第{{currentPage}}/{{total}}页</div>
        <el-pagination
            :current-page="currentPage"
            :page-size="pageSize"
            :page-sizes="props.pageSizes"
            :small="props.small"
            :disabled="props.disabled"
            layout="sizes, prev, pager, next, jumper"
            :total="400"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
    </div>
</template>

<script setup lang="ts">
import http from "../utils/request.ts";
import { ElMessage } from 'element-plus'
import { defineComponent, defineProps, defineEmits } from 'vue'; 
// 定义子组件事件
const emit = defineEmits(['lodingEvt', 'allData', 'getData']);  

// 当前页数
const currentPage:number = ref(1)

// 数据总条数
const total:number | null = ref(null)

// 每页数量改变
const pageSize:number = ref(20)

let props = defineProps({
    // 尺寸
    small:{
        type: Boolean,
        required: false,
        default: false
    },
    // 每页多少条配置
    pageSizes: {
        type: Array,
        required: false,
        default: [20, 80, 100, 120]
    },
    // 是否禁用
    disabled: {
        type: Boolean,
        required: false,
        default: false
    },
    // 请求地址
    url: {
        type: String,
        required: true,
    },
    // 请求方法 -- 默认post请求 --
    method: {
        type: String,
        required: false,
        default: 'post'
    },

    // 查询对象
    params: {
        type: Object,
        required: false,
        default: () => {}
    }
})


// 数据查询
const getData = async (e:boolean) => {
    emit('lodingEvt', true ); 
    // 将其父组件传过来的数据展开添加到查询对象里面
    let params = {...props.params}
    // params.pageSize = pageSize.value
    // params.pageNo = currentPage.value
    if(e) {
        params.pageNo = 1
    }
    let res = await http[props.method](props.url, params)
    // 成功结果
    if(res.code == 0) {
        // 想父组件返回数据
        emit('getData', res.data ? res.data : res.rows)
        emit('allData',res)
        total.value = res.total
        pageSize.value = res.pageNo
        currentPage.value = res.pageSize
        emit('lodingEvt', false)
    } else {
        // 查询失败
        emit('lodingEvt', false)
        ElMessage({type: 'error', message: '897994'})
    }
}

// 开始数据查询
// getData()

// page-size 改变时触发
const handleSizeChange = (e: eny):void => {
  pageSize.value = e
  getData()
}

// current-page 改变时触发
const handleCurrentChange = (e: eny):void => {
    currentPage.value = e
    getData()
}


defineExpose({  
    getData  
});  
</script>

<style lang="scss" scoped>
.paging {
    width: 100%;
    height: 50px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}
</style>